<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cancel</title>
</head>
<script src="https://unpkg.com/whatwg-fetch"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<body>
    <h1>Fetch 接口返回的是：<h3 id="text"></h3>
    </h1>
    <hr />
    <button onclick="doReq()">单击触发请求</button>
    <br /> <br /> <br />

    <h1>Axios 接口返回的是：<h3 id="axios"></h3>
    </h1>
    <hr />
    <button onclick="doReqAxios()">单击触发请求</button>
</body>
<script>
    let controller = null
    async function doReq() {
        controller && controller.abort()
        controller = new AbortController()
        const time = await fetch('http://localhost:8888/cancel', {
            signal: controller.signal
        }).then(data => {
            data.json().then(time => {
                document.getElementById('text').innerHTML = time
            })
        })
    }


    async function doReqAxios() {
        controller && controller.abort()
        controller = new AbortController()
        await axios.get('http://localhost:8888/cancel', {
            signal: controller.signal
        }).then(data => {
            document.getElementById('axios').innerHTML = data.data
        })
    }
</script>

</html>